<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>消息弹窗</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>

<body>
    <div class="container"><div class="toast show">
        <div class="toast-header">
          弹窗标题
          <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body">
          这是一个Bootstrap 5弹窗示例。
        </div>
      </div></div>
    <br>
    <div class="container"><div class="container mt-5">
        <button class="btn btn-primary" onclick="showToast()">显示弹窗</button>
    </div>
     
    <div class="position-fixed bottom-0 end-0 p-3">
        <div id="toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <strong class="me-auto">Bootstrap Toast</strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                这是一个Bootstrap 5弹窗示例。
            </div>
        </div>
    </div></div>
    <br>
    <div class="container"><!--显示多个弹窗 -->
    
        <div aria-live="polite" aria-atomic="true" class="position-relative">
            <!-- Position it: -->
            <!-- - `.toast-container` 设置弹窗直接的空隙 -->
            <!-- - `top-0` & `end-0` 设置弹窗显示位置-->
            <!-- - `.p-3` 设置外边距  -->
            <div class="toast-container top-0 end-0 p-3">
         
            <!-- 这里设置多个弹窗代码 -->
            <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="toast-header">
                <svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"></rect></svg>
                <strong class="me-auto">弹窗实例</strong>
                <small class="text-muted">刚刚</small>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">
                这是第二个消息
                </div>
            </div>
         
            <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="toast-header">
                <svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"></rect></svg>
                <strong class="me-auto">弹窗实例</strong>
                <small class="text-muted">2 秒前</small>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">
                这是第一个消息
                </div>
            </div>
            </div>
        </div>
         
        <!-- 显示多个弹窗 结束 --></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>

    <script src="./js/bootstrap.bundle.min.js"></script>
    <script>
       document.getElementById("toastbtn").onclick = function() {
  var toastElList = [].slice.call(document.querySelectorAll('.toast'))
  var toastList = toastElList.map(function(toastEl) {
    return new bootstrap.Toast(toastEl)
  })
  toastList.forEach(toast => toast.show())
}
    </script>
</body>

</html>